<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>列表渲染</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <body>
        <div id="root">
            <!-- key一定要有, 而且要唯一 -->
            <h2>遍历数组</h2>
            <ul>
                <li v-for="p in persons" :key="p.id">
                    {{p.name}} - {{p.age}}
                </li>
            </ul>

            <h2>遍历对象</h2>
            <ul>
                <li v-for="(p,index) in car" :key="index">
                    {{index}}---{{p}} 
                </li>
            </ul>

            <h2>遍历字符串</h2>
            <ul>
                <li v-for="(p,index) in str" :key="index">
                    {{index}}---{{p}} 
                </li>
            </ul>

            <h2>循环数据</h2>
            <ul>
                <li v-for="(p,index) in 10" :key="index">
                    {{index}}---{{p}} 
                </li>
            </ul>
        </div>
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                persons:[
                    {id:1, name: '张三', age: 18},
                    {id:2, name: '张三', age: 18},
                    {id:3, name: '张三', age: 18},
                ],
                car:{
                    brand: 'BMW',
                    price: 1000000,
                    color: 'red'
                },
                str:'hello,world'
            }
        })
    </script>
</html>